
<template>
  <div>
    <van-nav-bar
      title="7天宅家运动计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="homestead">
      <div class="home-img">
        <img src="../../assets/img/养成9.png" alt="" />
      </div>

      <van-tabs v-model:active="active">
        <van-tab title="介绍">
          <div class="home">
            <div class="home-box">
              <div class="home-left"> • 难度系数:</div>
              <div class="home-right">
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
              </div>
            </div>

            <div class="home-box">
              <div class="home-left"> • 适用人群:</div>
              <div class="home-right">健身训练爱好者</div>
            </div>

            <div class="home-box">
              <div class="home-left"> • 预期效果:</div>
              <div class="home-right">提高基础代谢，变身匀称身材</div>
            </div>

            <div class="home-text">
              <div class="home-text-title">
                长期宅，懒得动，一动就觉得累，好沮丧！
              </div>
              <div class="home-text-title">
                长期不锻炼，肌肉耐受力差，动几下就腰酸背痛的，怎么破？
              </div>
              <div class="home-text-title">
                一时心血来潮运动几分钟容易，但是就是坚持不下来，怎么才能持续呢？
              </div>
               <div class="home-text-title">
               看着肚子上宅出来的游泳圈，大腿宅出来的肥肉，空有动起来的心，没有动起来的实力！
              </div>
              <div class="text-te"></div>
              <div class="home-text-title">
                以上是想运动健身的宅男宅女们的共同困惑。唉，在家运动怎么就这么难？简直一把鼻涕一把泪了！
              </div>
               <div class="home-text-title">
                有没有适合在家做的、动作简单又容易坚持的锻炼方法？嚯嚯，当然有！
              </div>
               <div class="home-text-title">
                接着往下看，“宅家运动计划”就是为爱宅家的你量身定制的。
              </div>
              <div class="home-text-title">
               本方案会通过每天的小任务帮你在家动起来，也帮助你形成正确的运动和减肥观念，通过本计划，你将学会科学、健康、可持续的锻炼方法。
              </div>
              <div class="home-text-title">
                燃烧吧，你的小宇宙！
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="目标">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue'

const active = ref(0)

const onClickLeft = () => history.back()
</script>




<style lang="scss" scoped>
.homestead {
  width: 100%;
  height: 100%;
  // background-color: yellow;
  .home-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .home{
    .home-box {
      width: 100%;
      height: 50px;
    }

    .home-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
    }
    .home-right {
      float: left;
      height: 40px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
    }

    .home-text {
      width: 100%;
      padding: 10px;
      // line-height: 30px;
      // background-color: pink;
      color: #666;

      .home-text-title {
        line-height: 30px;
      }
      .text-te {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>